<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="人员调岗"></u-navbar>
		<view class="d-p-30">
			<view><text class="d-font-36" style="font-weight: bold;">班组信息</text></view>
			<view v-if="bz" class="card d-p-30 d-m-t-30" @click="transferSelectTeam">
				<view class="d-font-32 d-m-b-20" style="font-weight: bold;color: #151C24;">{{ bz.bzmc }}</view>
				<view class="d-flex" style="color: #5D6672;">
					<view class="d-font-24 d-flex-1">
						<text style="">所属单位</text>
						<text class="d-m-l-20" style="color: #162233;font-weight: bold;">{{ bz.deptName }}</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-font-24" style="flex: 1;">
						<text style="">班组长</text>
						<text class="d-m-l-20" style="color: #162233;font-weight: bold;">{{ bz.bzzxm || '无数据源' }}</text>
					</view>
					<view class="d-font-24" style="flex: 1;">
						<text style="">联系电话</text>
						<text class="d-m-l-20" style="color: #162233;font-weight: bold;">{{ bz.bzzlxdh || '无数据源' }}</text>
					</view>
				</view>
				<view class="d-flex d-m-t-20" style="color: #5D6672;">
					<view class="d-font-24" style="flex: 3;">
						<text style="">班组人数</text>
						<text class="d-m-l-20" style="color: #162233;font-weight: bold;">{{ bz.cyrs || 0 }}人</text>
					</view>
				</view>
			</view>
			<view v-else class="d-font-28 d-m-t-30" style="color: #21A5F3;" @click="transferSelectTeam">选择调岗班组</view>

			<view v-if="member && member.length > 0">
				<view class="d-m-t-20"><text class="d-font-36" style="font-weight: bold;">人员信息</text></view>
				<view class="d-m-t-30">
					<view class="card d-p-30 d-m-b-30" v-for="(item, index) in member" :key="index">
						<view class="d-font-24 d-m-t-20">
							<view class="d-flex">
								<view class="d-flex-1">
									<text class="" style="color: #5D6672;">姓名</text>
									<text class="d-m-l-20" style="color: #162233;">{{ item.staffname }}</text>
								</view>
								<view class="d-flex-1 d-flex">
									<view class="" style="color: #5D6672;">是否班组长</view>
									<view class="d-m-l-20 d-flex-1" style="color: #162233;">{{ item.isleader == 1 ? '是' : '否' }}</view>
									<view
										v-if="!info || info.ywzt == 1"
										:style="{
											color: item.isleader == 0 ? '#21A5F3' : '#999999'
										}"
										@click="diaogang(item)"
									>
										调岗
									</view>
								</view>
							</view>
							<view class="d-flex d-m-t-10">
								<view class="d-flex-1">
									<text class="" style="color: #5D6672;">证件号码</text>
									<text class="d-m-l-20" style="color: #162233;">{{ item.idcard | str }}</text>
								</view>
							</view>
							<view class="d-flex d-m-t-10">
								<view class="d-flex-1">
									<text class="" style="color: #5D6672;">原班组</text>
									<text class="d-m-l-20" style="color: #162233;">{{ item.origroupname }}</text>
								</view>
								<view class="d-flex-1">
									<text class="" style="color: #5D6672;">变更班组</text>
									<text class="d-m-l-20" style="color: #162233;">{{ item.taggroupname || '未变更' }}</text>
								</view>
							</view>
							<view class="d-flex d-m-t-10">
								<view class="d-flex-1">
									<text class="" style="color: #5D6672;">变更状态</text>
									<text
										class="d-m-l-20"
										:style="{
											color: item.state == 1 ? '#999' : 'red'
										}"
									>
										{{ item.state == 1 ? '未变更' : '已变更' }}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="card d-p-30 d-m-t-30">
					<view class="d-font-32 d-m-b-20" style="font-weight: bold;color: #151C24;">调离原因</view>
					<u--textarea placeholder="请输入内容" v-model="form.remark" :disabled="info && info.ywzt != 1"></u--textarea>
				</view>

				<view class="card d-m-t-30 d-p-30">
					<view class="d-flex d-m-b-20">
						<view class="d-font-32 d-flex-1" style="color: #151C24;font-weight: bold;">
							<block v-if="!info || info.ywzt == 1">添加</block>
							附件
						</view>
						<view v-if="!info || info.ywzt == 1"><u-button text="上传" size="mini" @click="show = true" type="primary"></u-button></view>
					</view>
					<view class="table">
						<view class="tr">
							<view class="th d-p-l-30">序号</view>
							<view class="th">附件</view>
							<view class="th">数量</view>
						</view>
						<view class="tr" v-for="(item, index) in file" :key="index" @click="fileInfo(item)">
							<view class="td d-p-l-30">{{ index + 1 }}</view>
							<view class="td">
								<text style="color: #21A5F3;">{{ item.attachName }}</text>
							</view>
							<view class="td">{{ item.count }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom u-safe-area-inset-bottom" v-if="!info || info.ywzt == 1">
			<view class="u-safe-area-inset-bottom d-flex u-border-top">
				<view class="d-flex-1 d-m-r-20"><u-button text="取消" @click="back"></u-button></view>
				<view class="d-flex-1 d-m-r-20"><u-button text="提交" @click="submit" type="primary"></u-button></view>
				<view class="d-flex-1"><u-button text="保存" @click="addMg" type="primary"></u-button></view>
			</view>
		</view>

		<u-action-sheet
			:actions="[{ name: '调岗信息', value: 'grtg_tgxx' }, { name: '其他', value: 'qita' }]"
			title="附件类型"
			description="请选择要上传的附件类型"
			:show="show"
			@close="show = false"
			@select="startUpload"
		></u-action-sheet>
		<u-modal
			title="温馨提示"
			content="请确保提交前已保存,否则可能导致部分信息丢失,确认要提交吗?"
			:show="showSubmit"
			@confirm="startSubmit"
			:showCancelButton="true"
			@cancel="showSubmit = false"
		></u-modal>
	</view>
</template>

<script>
import { getBid, addMg, getModifyGroupDetail, mgDetail, updateMg, getAtta, upload, submitMg } from '../../../common/api.js';
export default {
	data() {
		return {
			demo: false,
			form: {
				ywbh: '',
				remark: ''
			},
			bz: null,
			member: null,
			tag: 'add',
			id: '',
			file: [],
			show: false,
			showSubmit: false,
			info: null
		};
	},
	onLoad(e) {
		this.init(e);
	},
	onShow() {
		if (uni.getStorageSync('bz')) {
			if (this.bz) {
				console.log(this.bz.id, uni.getStorageSync('bz'));
				if (this.tag == 'edit' && this.bz.id != uni.getStorageSync('bz').id) {
					this.member = null;
					uni.$u.toast('信息变更, 请重新保存后再进行下步操作!');
				}
			}
			this.bz = uni.getStorageSync('bz');
		}
		if (this.member && uni.getStorageSync('dgry')) {
			this.init({ id: this.id });
		}
		uni.removeStorageSync('dgry');
	},
	onUnload() {
		uni.removeStorageSync('bz');
	},
	methods: {
		init(e) {
			if (!e || !e?.id) {
				// 这个有点像多余的
				getBid({
					params: {
						ywlx: 'salary_smzgl_modifygroup'
					}
				}).then(e => {
					this.form.ywbh = e.data;
				});
			} else {
				this.tag = 'edit';
				this.form.ywbh = e.id;
				this.id = e.id;
				mgDetail({
					params: {
						id: e.id
					}
				}).then(e => {
					this.form.remark = e.data.remark;
					this.info = e.data;
					this.bz = {
						bzmc: e.data.groupname,
						deptName: e.data.deptName,
						bzzxm: e.data.groupleadername,
						bzzlxdh: e.data.groupleaderphone,
						cyrs: e.data.cyrs,
						id: e.data.groupid
					};
					getModifyGroupDetail({
						params: {
							modifygroupid: this.form.ywbh
						}
					}).then(res => {
						this.member = res.data;
					});

					getAtta({
						params: {
							ywlx: 'salary_smzgl_modifygroup',
							ywbh: this.form.ywbh
						}
					}).then(e => {
						this.file = e.data;
					});
				});
			}
		},
		diaogang(item) {
			if (item.isleader == 1) {
				return false;
			}
			uni.setStorageSync('dgry', item);
			this.transferSelectTeam();
		},
		addMg() {
			if (!this.bz) {
				return uni.$u.toast('请选择班组!');
			}
			if (this.tag == 'add') {
				// 选择班组后保存
				addMg({
					sjly: 'app',
					gcbh: this.$user.ssgcxx[this.$appIndex].gcbh, // 所属项目编号
					deptId: this.$user.ssgcxx[this.$appIndex].deptId, // 所属部门编号
					groupid: this.bz.id, // 班组ID
					groupname: this.bz.bzmc,
					id: this.form.ywbh,
					projectid: this.$user.ssgcxx[this.$appIndex].gcbh,
					projectname: this.$user.ssgcxx[this.$appIndex].gcmc,
					cyrs: this.bz.cyrs,
					remark: this.form.remark
				}).then(e => {
					uni.$u.toast('已保存');
					this.id = e.data.id;
					getModifyGroupDetail({
						params: {
							modifygroupid: e.data.id
						}
					}).then(res => {
						this.member = res.data;
					});
					getAtta({
						params: {
							ywlx: 'salary_smzgl_modifygroup',
							ywbh: this.form.ywbh
						}
					}).then(e => {
						this.file = e.data;
					});
				});
			} else {
				updateMg({
					sjly: 'app',
					gcbh: this.$user.ssgcxx[this.$appIndex].gcbh, // 所属项目编号
					deptId: this.$user.ssgcxx[this.$appIndex].deptId, // 所属部门编号
					groupid: this.bz.id, // 班组ID
					groupname: this.bz.bzmc,
					id: this.form.ywbh,
					projectid: this.$user.ssgcxx[this.$appIndex].gcbh,
					projectname: this.$user.ssgcxx[this.$appIndex].gcmc,
					cyrs: this.bz.cyrs,
					remark: this.form.remark
				}).then(e => {
					uni.$u.toast('已保存');
					getModifyGroupDetail({
						params: {
							modifygroupid: e.data.id
						}
					}).then(res => {
						this.member = res.data;
					});
				});
			}
		},
		back() {
			uni.$u.route({
				type: 'back'
			});
		},
		transferSelectTeam() {
			if(this.info && this.info?.ywzt && this.info.ywzt != 1) {
				return false;
			}
			uni.$u.route({
				url: '/pages/index/member/transferSelectTeam'
			});
		},
		fileInfo(item) {
			let list = item.attachList;
			if (!list) {
				return uni.$u.toast('暂无附件');
			}
			uni.previewImage({
				urls: list.map(e => {
					return e.attachUrl;
				}),
				indicator: 'number',
				loop: true,
				fail: e => {
					console.error(e);
					uni.$u.toast('系统繁忙, 请稍后再试!');
				}
			});
		},
		startUpload(e) {
			const type = e.value;
			uni.chooseImage({
				count: 1,
				success: e => {
					let path = e.tempFilePaths[0];
					uni.showLoading({
						title: '上传中...',
						mask: true
					});
					upload({
						filePath: path,
						name: 'file',
						formData: {
							ywlx: 'salary_smzgl_modifygroup',
							attachType: type,
							bid: this.form.ywbh
						}
					})
						.then(rep => {
							uni.hideLoading();
							uni.$u.toast('上传成功');
							getAtta({
								params: {
									ywlx: 'salary_smzgl_modifygroup',
									ywbh: this.form.ywbh
								}
							}).then(e => {
								this.file = e.data;
							});
						})
						.catch(e => {
							uni.hideLoading();
							uni.$u.toast('上传失败');
						});
				}
			});
		},
		submit() {
			if (!this.bz) {
				return uni.$u.toast('请选择班组!');
			}
			if (!this.member) {
				return uni.$u.toast('请先保存后再提交!');
			}
			// console.log(1111);
			this.showSubmit = true;
		},
		startSubmit() {
			submitMg({
				params: {
					id: this.form.ywbh
				}
			}).then(e => {
				uni.$u.toast('提交成功');
				uni.$u.route({
					type: 'back'
				});
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
	.card {
		box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		background-color: #ffffff;
		-webkit-transition: height 0.3s;
		transition: height 0.3s;

		.table {
			font-size: 28rpx;
			display: table;
			width: 100%;
			vertical-align: middle;
			border: 1px solid #f6f7f8;
			.tr {
				display: table-row;
				.th,
				.td {
					display: table-cell;
					height: 80rpx;
					vertical-align: middle;
				}
				.th {
					font-weight: bold;
					color: #162233;
				}
				&:nth-child(2n-1) {
					background-color: #f6f7f8;
				}
			}
		}
	}

	.bottom {
		height: 140rpx;
		box-sizing: content-box;
		& > view {
			height: 140rpx;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ffffff;
			padding-left: 30rpx;
			padding-right: 30rpx;
			z-index: 9999;
		}
	}
}
</style>
